<!-- src/components/Upload/ThumbnailUpload.vue -->
<template>
  <BaseUpload
    v-model="modelValue"
    :max-count="1"
    :max-size="0.3"
    accept="image/jpeg,image/png"
    tip="建议尺寸：800x800，大小不超过300KB"
    endpoint="/upload/thumbnail"
  >
    <template #default>
      <div class="thumbnail-uploader">
        <el-icon><Picture /></el-icon>
        <div class="text">上传主图</div>
      </div>
    </template>
  </BaseUpload>
</template>

<script setup lang="ts">

import { computed } from 'vue';
import BaseUpload from './BaseUpload.vue';
import { Picture } from '@element-plus/icons-vue';

const props = defineProps({
  modelValue: String
});

const emit = defineEmits(['update:modelValue']);

const modelValue = computed({
  get: () => props.modelValue ? [props.modelValue] : [],
  set: (value) => emit('update:modelValue', value[0] || '')
});
</script>

<style scoped>
.thumbnail-uploader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 148px;
  color: var(--el-text-color-secondary);
  
  .el-icon {
    font-size: 28px;
    margin-bottom: 8px;
  }
  
  .text {
    font-size: 12px;
  }
}
</style>